{% extends 'layout/organba.html' %}
{% load static %}
{% block title %} 打卡项编辑 {% endblock %}


{% block content %}

    <div class="container">
    <div class="row">
    <div class="panel panel-default col-md-6 col-md-offset-3">
  <div class="panel-heading">请添加打卡问题,删除和添加问题都是确认提交之后生效！</div>
  <div class="panel-body">

<ul class="list-group" id="ul">

{% if qulist != False %}

             {% for key,value in qulist.items %}


<div class='list-group-item'><span class="value"><span class='glyphicon glyphicon-star-empty'></span >{{ value }}</span>

    <span class='btn btn-warning col-md-1 btn-xs' onclick='res(event)' style='display:inline-block; float: right;'>删除</span></div>



    {% endfor %}





{% endif %}


</ul>


  </div>
</div>
</div>



    <div class="row">

  <div class="col-md-6 col-md-offset-3">
    <div class="input-group">
      <input type="text" class="form-control" id="text1" placeholder="输入需要打卡的问题">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="btn">添加问题</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

<div class="row"></div>
        <br>
<div class="row">
                <div class="col-md-1  col-md-offset-7">

                    <input id="btnSubmit" type="button" class="btn btn-primary" value="确认打卡问题"/>

                </div>
            </div>

    </div>

<form id="regForm" method="POST" novalidate>
            {% csrf_token %}
<div id="cnm">



</div>

</form>


{% endblock %}








{% block js %}

      <script type="text/javascript">



          $("#btn").click(
              function () {
                 var text=$("#text1").val()
                  console.log(text);
                  if (text!=="")
                  {
                      var array=new Array();//声明一个新的数组
            var list1=$(".value").each(function (index,element) {//遍历每个对象
             array.push($(this).text());//往数组中存入值
                             });

                      if(array.length>10)
                      {  $("#text1").val("");
                         alert("问题不能超过11个");

                      }
                     else
                      { if (text.length<30){

                     $("#ul").append("<div class='list-group-item'> <span class='value'><span class='glyphicon glyphicon-star'></span>"+text+"</span><span class='btn btn-warning col-md-1 btn-xs' onclick='res(event)' style='display:inline-block; float: right;'>删除</span></div>");
                  $("#text1").val("");}

                  else {
                      $("#text1").val("");
                      alert("问题不能超过30个字符")}}


                   }
              }
          )



   function res (e) {

            $(e.target).parent().remove(); //不能用this
        }



          $("#btnSubmit").click(function () {   //采集数据

             var array=new Array();//声明一个新的数组
            var list1=$(".value").each(function (index,element) {//遍历每个对象
             array.push($(this).text());//往数组中存入值
                             });
                console.log(array);


             for(let i=0;i<array.length;i++){

                   $("#cnm").append("<input type='hidden' name='"+(i+1)+"' value='"+array[i]+"'/>")


                }


                   $.ajax({
                     url: "{% url 'web:organclock' %}",
                     type: "POST",
                     data: $('#regForm').serialize(), // 所有字段数据 + csrf token
                     dataType: "JSON",
                     success: function (res) {
                        if (res.status) {
                            location.href ="{% url 'web:organclock' %}";
                        } else {
                            $("span").remove();
                             $("#btnSubmit").before("<span id='span' class='btn btn-warning'>设置失败！</span>");


                        }
                    }
                })
            })

          </script>










{% endblock %}